<!--应聘简历-->
<template>
  <div>
    <div class="hearder-search">
      <div class="breadcrumb-container">
        <div>
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </div>
        <el-date-picker
            v-model="addtime"
            type="month"
            size="small"
            value-format="yyyy-MM"
            @change="changTime()"
            :picker-options="pickerOptions1"
            placeholder="选择月">
        </el-date-picker>
        <el-button size="small" @click="searchFn('refresh')" class="ml-10"><i class="el-icon-refresh"></i>重置刷新
        </el-button>
        <!--        <el-button size="small" class="ml-10" v-if="!searchForm.start_time" disabled>导出考勤记录</el-button>-->
        <div class="ml-10">
          <downexcel type="todayAttendance" :option="searchForm"
                     v-if="searchForm.year&&searchForm.month&&searchForm.class_id"></downexcel>
          <el-button size="small" v-else @click="showInfo()">导出儿童出勤登记表</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  props: ['tabStatus'],
  data() {
    return {
      addtime: '',
      searchForm: {
        year: '',
        month: '',
        class_id: '',
        section_id: ''
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created() {
  },
  methods: {
    showInfo() {
      this.$message.error('选择班级/年/月')
    },
    changTime(){
      if(this.addtime){
        let a_ = this.addtime.split('-')
        this.searchForm.year = a_[0]
        this.searchForm.month = a_[1]
      }
    },
    searchFn() {
      let newGetPower = this.getJson(this.getPower)
      newGetPower['section_id'].valueText = '';
      newGetPower['section_id'].child[0].valueText = '';
      this.getPower = newGetPower
      this.searchForm.year = ''
      this.searchForm.month = ''
      this.searchForm.class_id = ''
      this.searchForm.section_id = ''
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
  },
  mounted() {
  }
}
</script>
<style>
.tips-line-list {
  display: flex;
  margin-bottom: 10px;
}

.tips-line-list-l {
  flex: 1;
  border: 1px solid #1b8de5;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  border-radius: 5px;
  padding: 10px 0;
  color: #333;
  background: rgba(232, 249, 255, 0.3);
  cursor: pointer;
}

.tips-line-list-l:last-child {
  margin-right: 0;
}

.tips-line-list-l:nth-child(2):hover, .tips-line-list-l:nth-child(3):hover {
  box-shadow: 0 0 4px #1b8de5;
}

.tips-line-list-l span {
  font-weight: bold;
  color: #0085ff;
  font-size: 22px;
  margin-right: 5px;
}

.tips-line-list-l p:last-child {
  color: #777;
  margin-top: 5px;
}

.active_checkWork {
  background: #ffe9da;
  box-shadow: 0 0 4px #ffc990;
}

.pick-user-line {
  display: flex;
  flex-direction: column;
}
</style>
